// WebSocket 客户端
const socket = io();
const chatForm = document.getElementById('chat-form');
const chatMessages = document.querySelector('.chat-messages');
const roomName = document.getElementById('room-name');
const userList = document.getElementById('users');

// 解析房间名与用户名
const { username, room } = Qs.parse(location.search, {
    ignoreQueryPrefix: true,
})

// 区分房间（将消息发送给对应房间）
socket.emit("joinRoom", { username, room })

// 获得从服务器发送的消息
socket.on("message", function (message) {
    // 创建一个事件，来显示发送的内容
    outputMessage(message)

    // 有新消息时，滚动至底部
    chatMessages.scrollTop = chatMessages.scrollHeight
})

// 更新客户端的用户组显示
socket.on("updateInfos", function ({ room, users }) {
    setRoomName(room)
    setUserList(users)
})

// 监听消息提交
chatForm.addEventListener("submit", function (e) {
    // 防止提交空消息
    e.preventDefault();

    // 获取提交的信息
    let msg = e.target.elements.msg.value

    // 将信息发送给服务器
    socket.emit("chatMessage", msg)

    // 提交之后清除输入框内容，并聚焦输入框
    e.target.elements.msg.value = ""
    e.target.elements.msg.focus()
})

// 输出消息到DOM节点
function outputMessage(msg) {
    let div = document.createElement("div")
    div.classList.add("message")
    div.innerHTML = `<p class="meta">${msg.username}  <span>${msg.time}</span></p>
    <p class="text">
      ${msg.message}
    </p>`
    chatMessages.appendChild(div)
}

// 设置聊天室名称到DOM节点
function setRoomName(room) {
    roomName.innerHTML = room
}

// 设置聊天室成员到DOM节点
function setUserList(users) {
    userList.innerHTML = `
    ${users.map(user => `<li>${user.username}</li>`).join("")}
    `
}